<template>
	<view class="my_page">
		<view class="my_header" :style="`padding-top: ${statusBarHeight}rpx`">
			<view class="wrap" :style="`padding-top: ${statusBarHeight}rpx`">
				<view class="back" @click="handleBack">
					<view v-if="isBack" class="iconfont icon-arrow-left-bold"></view>
					<view>{{title}}</view>
				</view>
			</view>
		</view>
		<slot></slot>
		<view v-if="isTabbar" class="my_tabbar">
			<view class="wrap">
				<view v-for="(item, key) in tabList" :key="key" :class="tabKey === key ? 'active' : ''" @click="handleTabClick(key)">
					<view>
						<view :class="`iconfont ${item.icon}`"></view>
					</view>
					<view>{{ item.label }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue'
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight)
const props = defineProps({
	isBack: false,
	isTabbar: false,
	tabKey: {
		type: Number,
		default: 0
	},
	title: {
		type: String,
		default: '国投资产'
	}
})
const tabList = ref([
	{ label: '首页', icon: 'icon-home-fill', page: '/pages/index/index'},
	{ label: '资产列表', icon: 'icon-biyeyuanxiao', page: '/pages/asset/index'},
	{ label: '地图', icon: 'icon-EDCdasha', page: '/pages/map/index'},
	{ label: '我的', icon: 'icon-user', page: '/pages/mine/index'}
])
function handleTabClick(key) {
	const tab = tabList.value[key]
	if (tab.page) {
		uni.redirectTo({
			url: tab.page
		})
	}
}
function handleBack() {
	console.log('handleBack')
	uni.navigateBack()
}
</script>

<style lang="scss">
@import '@/static/styles/index.scss';
.my_page {
	background: #f4f5f9;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	min-height: 100vh;
	.my_header {
		background: #2979ff;
		height: 120rpx;
		.wrap {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			padding: 0 30rpx 18rpx 30rpx;
			height: 102rpx;
			display: flex;
			align-items: flex-end;
			color: white;
			background: #2979ff;
			z-index: 1999;
			.back {
				display: flex;
				align-items: center;
				.iconfont {
					margin-right: 10rpx;
				}
			}
		}
	}
	.my_tabbar {
		height: 120rpx;
		width: 100%;
		background: none;
		.wrap {
			box-shadow: 0 -5px 10px 0px rgba(0, 0, 0, 0.1);
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 120rpx;
			z-index: 10;
			background: #fff;
			display: flex;
			justify-content: space-around;
			align-items: flex-end;
			text-align: center;
			font-size: 24rpx;
			color: #adb4cc;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			.iconfont {
				font-size: 50rpx;
				color: #adb4cc;
			}
			& > view {
				padding-bottom: 20rpx;
			}
			.active {
				& > view:nth-child(1) {
					.iconfont {
						color: #006fff;
					}
				}
				& > view:nth-child(2) {
					color: black;
				}
			}
		}
	}
}
</style>